
<template>
  <el-dialog id="dialogBox" :title="tableData.uploadTypeName" :visible.sync="customData.visible">
    <el-form>
      <div class="el-form-suImg" prop="Remarks">
        <el-upload ref="upload" action="https://jsonplaceholder.typicode.com/posts/" list-type="picture-card" :auto-upload="false" :on-change="beforeAvatarUploadType" :show-file-list="false">
          <i v-if="tableData.uploadFileInfo.uploadUrl == ''" class="el-icon-plus" />
          <div v-else>
            <img :src="tableData.uploadFileInfo.uploadUrl" alt="">
          </div>
        </el-upload>
      </div>
      <el-form-item>
        <el-button type="primary" class="btn-location add-right" @click="onUpload()">上传</el-button>
      </el-form-item>
    </el-form>
  </el-dialog>
</template>
<script>
import { global } from '../../filter/global-api'
import _common from '../../framework/commonJs/wptx_common'
import $ from 'jquery'
import cosjssdk from '../../filter/cos-js-sdk-v5'
const _FUNCTION_NAME = _common.pageName.WPTXTXUPLOAD
export default {
  props: {},
  data() {
    return {
      cos: {},
      tableData: {
        uploadType: null,
        uploadTypeName: '',
        initParams: {
          imageAvailable: true,
          imageMaxSize: 3,
          videoAvailable: false,
          videoMaxSize: 10,
          savePath: ''
        },
        inputParams: {},
        uploadFileInfo: {
          uploadUrl: ''
        }
      },
      customData: {
        chooseFile: null,
        visible: false
      },
      callback: null
    }
  },
  methods: {
    init(uploadType, initUrl, initParams, inputParams, uploadCallback) {
      const self = this
      if (uploadType == 0) {
        // LCD图
      } else if (uploadType == 1) {
        // LED图/视频
      } else if (uploadType == 2) {
        // LED模板图
        self.tableData.uploadTypeName = '上传LED模板图片'
      } else {
        // error
        alert('上传类型有误')
        return false
      }
      self.uploadType = uploadType
      self.initParams = initParams
      if (initParams == undefined || initParams == null) {
        alert('缺少必要参数')
        return false
      }
      if (
        initParams.imageAvailable == undefined ||
        initParams.imageAvailable == null ||
        initParams.imageAvailable == ''
      ) {
        self.initParams.imageAvailable = false
      } else if (initParams.imageAvailable == true) {
        self.initParams.imageAvailable = true
      } else {
        self.initParams.imageAvailable = false
      }
      if (
        initParams.videoAvailable == undefined ||
        initParams.videoAvailable == null ||
        initParams.videoAvailable == ''
      ) {
        self.initParams.videoAvailable = false
      } else if (initParams.videoAvailable == true) {
        self.initParams.videoAvailable = true
      } else {
        self.initParams.videoAvailable = false
      }
      self.inputParams = inputParams
      self.callback = uploadCallback
      if (initUrl != undefined && initUrl != null) {
        self.tableData.uploadFileInfo.uploadUrl = initUrl
      } else {
        self.tableData.uploadFileInfo.uploadUrl = ''
      }
      self.customData.chooseFile = null
      self.loadSign()
      return true
    },
    loadSign() {
      const self = this
      self.cos = new COS({
        getAuthorization: function(options, callback) {
          const params = ''
          global.post('/system/tencentConfig', null, null, {}, function(res) {
            if (res.code == 200) {
              if (
                res.data.tmpSecretId != undefined &&
                res.data.tmpSecretKey != undefined &&
                res.data.sessionToken != undefined &&
                res.data.expiredTime != undefined
              ) {
                callback({
                  TmpSecretId: res.data.tmpSecretId,
                  TmpSecretKey: res.data.tmpSecretKey,
                  XCosSecurityToken: res.data.sessionToken,
                  ExpiredTime: res.data.expiredTime
                })
              } else {
                global.openTip(
                  self,
                  '上传签名获取失败，请刷新页面后重试',
                  'error'
                )
              }
            } else {
              global.openTip(
                self,
                '上传签名获取失败，请刷新页面后重试',
                'error'
              )
            }
          })
        }
      })
    },
    show() {
      const self = this
      self.customData.visible = true
    },
    hide() {
      const self = this
      self.customData.visible = false
    },
    /* 选择的文件*/
    beforeAvatarUploadType(file) {
      const self = this
      if (file.raw.type.indexOf('image') > -1) {
        if (!self.initParams.imageAvailable) {
          global.openTip(self, '禁止上传图片文件', 'error')
          return false
        } else {
          if (file.raw.size > self.initParams.imageMaxSize * 1024 * 1024) {
            global.openTip(
              self,
              '图片文件不得大于【' + self.initParams.imageMaxSize + '】Mb',
              'error'
            )
            return false
          }
        }
      }
      if (file.raw.type.indexOf('video') > -1) {
        if (!self.initParams.videoAvailable) {
          global.openTip(self, '禁止上传视频文件', 'error')
          return false
        } else {
          if (file.raw.size > self.initParams.videoMaxSize * 1024 * 1024) {
            global.openTip(
              self,
              '视频文件不得大于【' + self.initParams.videoMaxSize + '】Mb',
              'error'
            )
            return false
          }
        }
      }
      self.tableData.uploadFileInfo.uploadUrl = file.url
      self.customData.chooseFile = file.raw
    },
    onUpload() {
      const self = this
      if (self.customData.chooseFile == null) {
        global.openTip(self, '请选择需要上传的文件', 'error')
        return false
      }
      this.$parent.loading(true)
      const file = self.customData.chooseFile
      let Suffix = file.name
      var index = Suffix.lastIndexOf('.')
      Suffix = Suffix.substring(index, Suffix.length)
      const uuid = global.uuid(8, 16)
      const cosParams = {
        Bucket: 'samadv-1258077372',
        Region: 'ap-guangzhou',
        Key: self.initParams.savePath + uuid + Suffix,
        Body: file
      }
      self.cos.sliceUploadFile(cosParams, function(err, data) {
        if (data != undefined) {
          const uploadedFileInfo = {
            displayFileUrl: 'https://' + data.Location,
            fileSize: file.size,
            originFileName: file.name,
            fileName: uuid + Suffix,
            uploadFileMd5: data.ETag
          }
          self.callback(self.inputParams, uploadedFileInfo)
        } else {
          global.openTip(self, '文件上传失败，请刷新页面后重试', 'error')
          return false
        }
      })
    }
  }
}
</script>
<style>
#dialogBox > div {
  max-width: 600px !important;
  min-width: 400px !important;
}

.newTwo {
  padding-bottom: 60px;
}
.add-right {
  float: right;
}

.el-upload--picture-card > div {
  width: 146px;
  height: 146px;
  display: flex;
  justify-content: center;
  align-items: center;
}

.el-upload--picture-card > div img {
  max-width: 100%;
  max-height: 100%;
}
</style>
